<style>
</style>
<template>
    <ly-page>
        <ly-navi title="标签"></ly-navi>
        <ly-page-content>
            <div style="margin-bottom: 20px; color: #3793FF;">小号标签</div>
            <div>
                <ly-tag size="small" color="dark">dark</ly-tag>
                <ly-tag size="small" color="gray">gray</ly-tag>
                <ly-tag size="small" color="blue">blue</ly-tag>
                <ly-tag size="small" color="red">red</ly-tag>
                <ly-tag size="small" color="yellow">yellow</ly-tag>
                <ly-tag size="small" color="green">green</ly-tag>
                <ly-tag size="small" color="purple">purple</ly-tag>
                <ly-tag size="small" color="black">black</ly-tag>
            </div>
            <div style="height: 20px"></div>
            <div style="margin-bottom: 20px; color: #3793FF;">中号标签</div>
            <div>
                <ly-tag size="medium" color="dark">dark</ly-tag>
                <ly-tag size="medium" color="gray">gray</ly-tag>
                <ly-tag size="medium" color="blue">blue</ly-tag>
                <ly-tag size="medium" color="red">red</ly-tag>
                <ly-tag size="medium" color="yellow">yellow</ly-tag>
                <ly-tag size="medium" color="green">green</ly-tag>
                <ly-tag size="medium" color="purple">purple</ly-tag>
                <ly-tag size="medium" color="black">black</ly-tag>
            </div>
            <div style="height: 20px"></div>
            <div style="margin-bottom: 20px; color: #3793FF;">大号标签</div>
            <div>
                <ly-tag size="big" color="dark">dark</ly-tag>

                <ly-tag size="big" color="gray">gray</ly-tag>
                <ly-tag size="big" color="blue">blue</ly-tag>
                <ly-tag size="big" color="red">red</ly-tag>
                <ly-tag size="big" color="yellow">yellow</ly-tag>
                <ly-tag size="big" color="green">green</ly-tag>
                <ly-tag size="big" color="purple">purple</ly-tag>
                <ly-tag size="big" color="black">black</ly-tag>
            </div>
            <div style="height: 20px"></div>
            <div style="margin-bottom: 20px; color: #3793FF;">无边框</div>
            <div>
                <ly-tag :border="false" size="big" color="dark">dark</ly-tag>

                <ly-tag :border="false" size="big" color="gray">gray</ly-tag>
                <ly-tag :border="false" size="big" color="blue">blue</ly-tag>
                <ly-tag :border="false" size="big" color="red">red</ly-tag>
                <ly-tag :border="false" size="big" color="yellow">yellow</ly-tag>
                <ly-tag :border="false" size="big" color="green">green</ly-tag>
                <ly-tag :border="false" size="big" color="purple">purple</ly-tag>
                <ly-tag :border="false" size="big" color="black">black</ly-tag>
            </div>
            <div style="height: 20px"></div>
            <div style="margin-bottom: 20px; color: #3793FF;">字体加粗 bold</div>
            <div>
                <ly-tag color="dark" bold>dark</ly-tag>

                <ly-tag color="gray" bold>gray</ly-tag>
                <ly-tag color="blue" bold>blue</ly-tag>
                <ly-tag color="red" bold>red</ly-tag>
                <ly-tag color="yellow" bold>yellow</ly-tag>
                <ly-tag color="green" bold>green</ly-tag>
                <ly-tag color="purple" bold>purple</ly-tag>
                <ly-tag color="black" bold>black</ly-tag>
            </div>
            <div style="height: 20px"></div>
            <div style="margin-bottom: 20px; color: #3793FF;">可删除 closeable</div>
            <div>
                <ly-tag color="dark" closeable>dark</ly-tag>

                <ly-tag color="gray" closeable>gray</ly-tag>
                <ly-tag color="blue" closeable>blue</ly-tag>
                <ly-tag color="red" closeable>red</ly-tag>
                <ly-tag color="yellow" closeable>yellow</ly-tag>
                <ly-tag color="green" closeable>green</ly-tag>
                <ly-tag color="purple" closeable>purple</ly-tag>
                <ly-tag color="black" closeable>black</ly-tag>
            </div>

    <ly-code-view>
        <pre v-pre>
<ly-tag :border="false" size="big" color="dark" closeable bold>dark</ly-tag>
<ly-tag :border="false" size="big" color="gray" closeable bold>gray</ly-tag>
<ly-tag :border="false" size="big" color="blue">blue</ly-tag>
<ly-tag :border="false" size="big" color="red">red</ly-tag>
<ly-tag :border="false" size="big" color="yellow">yellow</ly-tag>
<ly-tag :border="false" size="big" color="green">green</ly-tag>
<ly-tag :border="false" size="big" color="purple">purple</ly-tag>
<ly-tag :border="false" size="big" color="black">black</ly-tag>
        </pre>
    </ly-code-view>

            <ly-markdown>
              <pre v-pre>
## `ly-tag`

#### Attributes

| 属性名  |说明   | 类型|可选值|默认值|
| ------------ | ------------ |------------ |------------ |------------ |
|  border | 显示边框	  |boolean |—	|true|
|  size | 大小	  |string |big,medium,small	|medium|
|  color | 包含左侧深色线	 |string |dark,gray,blue,red,yellow,green,purple,black 	|gray	|
|  closeable | 包含左侧深色线	  |boolean |—	|false	|
|  bold | 包含左侧深色线	  |boolean |—	|false	|

                  </pre>
            </ly-markdown>


        </ly-page-content>


    </ly-page>
</template>
<script>
    Rap.define("", [], function () {
        return {
            data: function () {
                return {

                }
            },
            mounted: function () {
//                window.codeEl = this.$refs.code;
//                var html = codeEl.firstChild.innerHTML;
//                this.code = html;
            },
            methods: {}
        }
    })
</script>